트리 쉐이킹

❓질문

트리 쉐이킹에 대해 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

트리 쉐이킹이란 보통 번들러에서 많이 제공해주는 최적화 기법중 하나입니다.
우리가 빌드할때 보통 최종 번들을 하나로 묶어서 빌드하게 되는데 이때 사용하지 않는 코드를 제거하여 총 크기를 줄이는 기법입니다.

이때 트리쉐이킹이 잘 적용될려면 사이드 이펙트가 있는 함수를 작성하는 것을 지양하고 순수 함수 형태로 작성하는것이 좋습니다. 실행되는 코드가 예측할 수 없는 동작을 한다면 이 코드를 삭제해도 안전한지를 판단할 수 가없기 때문입니다.

🏫 정리한 내용

또한 트리 쉐이킹이 작동하려면 ES 모듈을 사용해야 합니다. ES 모듈은 정적인 구조를 가지기 때문에, 코드 분석 과정에서 어떤 모듈이 사용되고 어떤 모듈이 사용되지 않았는지를 쉽게 판단할 수 있습니다, 반면 CommonJS같은 동적 모듈 시스템을 사용할 경우, 정확한 코드 분석이 어려워 트리 쉐이킹이 제대로 동작하지않을 수 있습니다.

번들러 에서 많이 제공해주는 기법이라고 했는데 자주쓰는 번들러의 종류에는 webpack , Rollup, esbuild등이 있습니다.